<template>
	<!-- 导航栏 -->
	<view >
		<view :class="getClass">
			<!-- 状态栏 -->
			<view :style="'height:'+statusBarHeight+'px'"></view>
			<!-- 导航栏 -->
			<view class="w-100 flex-a-j flex-row justify-between" style="height: 90upx;">
				
				<view class="flex flex-row ">
					<!-- 返回 -->
					<free-icon-button @click="back" v-if="showBack">
						<text class="iconfont font-md text-center " :class="backColor?backColor:''">&#xe60d;</text>
					</free-icon-button>
					
					<!-- 左边 -->
					<view class=" flex-a-j" :class="showBack?'':'ml-3'" v-if="title">
						<slot name="title">
							
						</slot>
						<slot></slot>
					</view>
				</view>
				<!-- 右边 -->
				<view class="flex-a-j flex-row mx-2" v-if="showRight">
					
					<slot name="right">
						<free-icon-button @click="search">
							<text class="iconfont font-md text-center">&#xe6e3;</text>
						</free-icon-button>
						<free-icon-button @click="openExtend">
							<text class="iconfont font-md text-center">&#xe682;</text>
						</free-icon-button>
					</slot>
					
				</view>
			</view>
		</view>
		
		<!-- 占位 -->
		<view v-if="fixed" :style="fixedStyle"></view>
		
		<!-- 扩展菜单 -->
		<!-- 弹出层 -->
		<free-popup ref="extend"  :bodyW="320" :bodyH="525" transformOrigin="right top">
			<view style="width: 320rpx;background-color: rgba(57,57,57,1);height: 525rpx;" class=" flex flex-column rounded">
				<view class="flex-1 flex-a flex-row position-relative" hover-class="bg-hover-dark" v-for="(item,index) in extend" :key="index" @click="clickEvent(item)">
					<text class="iconfont font-md text-white pl-3 pr-2">{{item.icon}}</text>
					<text class="font-md text-white ">{{item.name}}</text>
					<text v-if="index!==extend.length-1" style="width: 235rpx;height: 1rpx;background-color: rgba(255,255,255,0.1);" class="bottom-0 right-0 position-absolute" ></text>
				</view>
			
			</view>
		</free-popup>
	</view>
</template>

<script>
	import freeIconButton from "@/components/free-ui/free-icon-button.vue"
	import freePopup from "./free-popup.vue"
	import $R from '@/common/free-lib/request.js';
	export default{
		components:{
			freeIconButton,freePopup
		},
		props:{
			backEvent:{
				default:true,
				type:Boolean
			},
			showBack:{
				default:false,
				type:Boolean
			},
			backColor:{
				default:"",
				type:String
			},
			title:{
				default:true,
				type:[Boolean,String]
			},
			fixed:{
				default:true,
				type:Boolean
			},
			bgColor:{
				default:"bg-light",
				type:String
			},
			showRight:{
				default:true,
				type:Boolean
			},
			
			
		},
		data() {
			return {
				statusBarHeight:0,
				navBarHeight:0,
				extend:[
					{
						name:"发起群聊",
						event:"navigateTo",
						path:"/pages/mail/mail/mail?type=create",
						icon:"\ue633"
					},
					{
						name:"添加朋友",
						event:"navigateTo",
						path:"/pages/common/search",
						icon:"\ue65d"
					},
					// #ifndef H5
					{
						name:"扫一扫",
						event:"scan",
						icon:"\ue614"
					},
					// #endif
					{
						name:"收付款",
						event:"",
						icon:"\ue66c"
					},
					{
						name:"帮助与反馈",
						event:"",
						icon:"\ue65d"
					}
				]
			}
		},
		mounted() {
			// #ifdef APP-PLUS-NVUE
			this.statusBarHeight = plus.navigator.getStatusbarHeight()
			// #endif
			this.navBarHeight = this.statusBarHeight+uni.upx2px(90)
		},
		computed:{
			fixedStyle(){
				return `height:${this.navBarHeight}px`
			},
			getClass(){
				let fixed = this.fixed?'fixed-top':''
				return `${fixed} ${this.bgColor}`
			}
			
		},
		methods:{
			search(){
				this.$emit('search')
			},
			openExtend(){
				this.$refs.extend.show(uni.upx2px(415),this.navBarHeight+uni.upx2px(19))
			},
			clickEvent(item){
				switch(item.event){
					case 'navigateTo':
						uni.navigateTo({
							url: item.path,
							
						})
						break;
					case 'scan':
						uni.scanCode({
						    success:  (res)=> {
								if(res.scanType==='QR_CODE'){
									let result = JSON.parse(res.result)
									
									switch(result.type){
										case 'group':
											$R.post('/group/checkrelation',{
												id:parseInt(result.id)
											}).then(res2=>{
												if(res2.status){
													//已在群内
													// console.log(res2)
													uni.navigateTo({
														url: '/pages/chat/chat?params='+encodeURIComponent(JSON.stringify({
															id:res2.group.id,
															name:res2.group.name,
															avatar:res2.group.avatar,
															chat_type:'group'
														}))
														
													});
													
													
												}else{
													
													 // console.log(res2)
													//加入群聊
													
													uni.navigateTo({
														url: '/pages/chat/scan-chat/scan-chat?params='+encodeURIComponent(JSON.stringify(res2.group)),
													});
												}
												
											})
											break;
										case 'user':
											uni.navigateTo({
												url: '/pages/mail/user-base/user-base?user_id='+result.id,
											});
											break;
									}
								}
						        // console.log('条码类型：' + res.scanType);
						        // console.log('条码内容：' + res.result);
						    }
						});
						break;
					default:
						 uni.showToast({
								title: '开发中',
								icon:'none'
							});
						break;
				}
				this.$refs.extend.hide()
			},
			back(){
				if(this.backEvent){
					uni.navigateBack({
						delta: 1
					});
				}
				this.$emit('back')
			}
		}
	}
</script>

<style>
</style>
